<template>
  <view class="content" catchtouchmove="true">
    <view class="box-bg">
      <uni-nav-bar 
			height="10vh" 
			dark
      		backgroundColor="#efefef" 
      		class="bg-nav" 
      		left-icon="settings-filled" 
			right-icon="font"
      		color="#4a87b6" 
      		border="false"
      		shadow="true"
			@clickRight="toWordCloud"
      		@clickLeft="toSetting">
        <view class="item">
      			<view :class="['index',item.pageName==='index'? 'active' : '']" @click="checkPage(0)" id="t1"><text>浏览</text></view>
      			<view :class="['index',item.pageName==='calendar'? 'active' : '']" @click="checkPage(1)" id="t2"><text>日历</text></view>
      			<view :class="['index',item.pageName==='me'? 'active' : '']" @click="checkPage(2)" id="t3"><text>我</text></view>
        </view>
		
      </uni-nav-bar>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
	props:{
		item:{
			type:Object,
			default(){
				return{
					pageName:"index",
					id:""
				}
			}
		}
	},			
    onLoad() {
		
	},
    methods: {
		checkPage(page){
			if(page===0){
				uni.redirectTo({
					url:'/pages/index/index',
					animationType: 'pop-in',
					animationDuration: 1
				})
			}else if(page===1){
				uni.redirectTo({
					url:'/pages/calendar/calendar',
					animationType: 'pop-in',
					animationDuration: 1
				})
			}else if(page===2){
				uni.redirectTo({
					url:'/pages/me/me'
				})
			}
		},
		toWordCloud(){
			uni.navigateTo({
				url:"/pages/wordCloud/wordCloud"
			})
		},
		toSetting(){
			
			uni.navigateTo({
				
				url:"/pages/setting/setting"
			})
		}
	},
  };
</script>

<style lang="scss">
.content {
	padding: 0;
	margin: 0;
	
  .box-bg {
    .bg-nav {
		align-items: center; // 设置子元素在交叉轴上居中对齐
		justify-content: space-between; // 主轴两端对齐，中间的空间平均分布
		height: 100%; // 设置导航栏的高度为100%
		
      .item {
		
        display: flex;
        justify-content: center; // 设置子元素在主轴上居中对齐
        align-items: center; // 设置子元素在交叉轴上居中对齐
        flex: 2; // 设置flex为1，使item占据剩余的空间
		
		
		.active{
			background-color:$font-blue ;
			text{
				color: $uni-bg-color;
			}
		}
		
        .index,
        .clander,
        .me {
			padding: 1vh 0 1vh 0; 
			text-align: center;
			border: 2rpx solid $font-blue;
			color: $font-blue;
			font-family: "宋体";
			font-size: 2vh; // 根据需要调整字体大小
			width: 8vh;
        }
		#t1{
			border-radius: 8rpx 0 0 8rpx;
		}
		#t3{
			border-radius: 0 8rpx 8rpx 0;
		}
      }
    }
  }
}
</style>